<template>
  <div>
    <tabs />
    <div class="circle-wrap">
      <div class="circle">
        <el-checkbox-group v-model="multipleSelection">
          <div v-for="(item, index) in datas" :key="index" class="circle-item">
            <div class="circle-top">
              <div class="circle-checkbox"><el-checkbox :label="item.id" /></div>
              <div class="circle-avatar"><el-avatar :src="item.avatar_url" size="40" /></div>
              <div class="circle-info">
                <div class="name">{{ item.nick_name }}</div>
                <div class="time">{{ item.create_time }}</div>
              </div>
              <el-button v-if="item.recommend == 1" class="is-recommend" plain size="mini" icon="edu-icon--left edu-icon-zan1" @click="recommend(item.id)">已推荐</el-button>
              <el-button v-else plain size="mini" icon="edu-icon--left edu-icon-zan" @click="recommend(item.id)">推荐</el-button>
            </div>
            <div class="circle-content" @click="detail(item.id)">
              <div class="desc">{{ item.content }}</div>
              <div class="parent">
                <el-row class="img" type="flex"><el-image v-for="image in item.attach_url" :key="image" :src="image" /></el-row>
              </div>
            </div>
            <div class="circle-footer">
              <div v-auth="'sns.circle.delete'" class="delete" @click="deleteCircle(item.id)">删除</div>
              <div class="like">点赞 {{ item.like_num }}</div>
              <el-divider direction="vertical" />
              <div class="comment">评论 {{ item.comment_num }}</div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
    </div>
    <div class="operation-wrapper">
      <div class="operation-placeholder" />
      <div class="operation-fixed">
        <el-row type="flex" justify="space-between">
          <div class="operation-left">
            <el-checkbox v-model="allChecked" size="mini" type="text" @change="toggleSelection()">全选</el-checkbox>
            <el-button v-auth="'sns.circle.delete'" size="mini" @click="deletes(scope)">删除</el-button>
          </div>
          <div class="operation-right">
            <el-pagination
              :current-page.sync="paginate.page"
              :page-size="paginate.count"
              :page-sizes="pageSize"
              layout="total,sizes, prev, pager, next,jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handleCurrentChange"
              @next-click="handleCurrentChange"
            />
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from './tabs';
export default {
  components: {
    Tabs
  },
  inject: ['reload'],
  data() {
    return {
      response: null,
      paginate: {
        count: 20,
        page: 1
      },
      allChecked: false,
      multipleSelection: [],
      pageSize: [10, 20, 30, 40]
    };
  },
  computed: {
    total() {
      if (this.response) {
        return this.response.data.total;
      }
      return 0;
    },
    datas() {
      if (this.response) {
        return this.response.data.data;
      }
      return [];
    }
  },
  created() {
    this.loadData();
  },
  mounted() {
    this.$store.dispatch('setLoading', 0);
  },
  methods: {
    handleCurrentChange: function(page) {
      this.paginate.page = page;
      this.loadData();
    },
    // 分页条数
    handleSizeChange: function(val) {
      // 更新加载条数
      this.paginate.count = val;
      this.handleCurrentChange(1);
      return val + '/页';
    },
    loadData: function() {
      this.$http.get(
        '/circle/admin/list',
        {
          ...this.paginate
        },
        response => {
          this.response = response;
        },
        _ => {},
        false
      );
    },
    // 全选
    toggleSelection: function() {
      if (this.allChecked) {
        this.datas.forEach(item => {
          this.multipleSelection.push(item.id);
        });
      } else {
        this.multipleSelection = [];
      }
    },
    // 详情
    detail: function(id) {
      if (this.hasPermission('sns.circle.detail')) {
        this.$router.push({ path: '/sns/circle/' + id + '/detail' });
      }
    },
    recommend(id) {
      if (this.hasPermission('sns.circle.recommend')) {
        const data = this.datas.find(item => item.id == id);
        const recommend = data.recommend == 1 ? 0 : 1;
        this.$box
          .confirm(recommend ? '确认推荐该动态吗' : '确认取消推荐该动态吗')
          .then(() => {
            this.$http.put(
              '/circle/admin/' + id + '/recommend',
              {
                recommend: recommend
              },
              _ => {
                data.recommend = !data.recommend;
              },
              error => {
                this.$message.error(error.msg);
              },
              false
            );
          })
          .catch(() => {});
      } else {
        this.$message.error('暂无权限进行操作');
      }
    },
    deleteCircle: function(id) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/circle/admin/' + id + '/delete',
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量删除
    deletes: function() {
      var ids = this.multipleSelection;
      if (ids.length === 0) {
        this.$message.warning('请选择要删除的动态');
        return false;
      }
      ids = ids.join(',');
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/circle/admin/deletes/' + ids,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    }
  }
};
</script>

<style lang="scss" scoped>
.circle {
  padding-left: 20px;
  padding-right: 30px;
  .circle-item {
    padding-top: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dcdfe6;
  }
  .circle-top {
    display: flex;
    align-items: center;
    .circle-checkbox {
      ::v-deep .el-checkbox__label {
        display: none;
      }
    }
  }
  .circle-avatar {
    margin-left: 20px;
  }
  .circle-info {
    flex: 1;
    margin-left: 18px;
    .name {
      font-size: 14px;
      font-weight: 500;
      color: #303133;
    }
    .time {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 400;
      color: #909399;
    }
  }
  .is-recommend {
    color: #5191ff;
    border-color: #5191ff;
  }
  .circle-content {
    margin-left: 92px;
    margin-top: 15px;
    cursor: pointer;
    .desc {
      font-size: 14px;
      font-weight: 400;
      color: #303133;
      line-height: 20px;
    }
    .parent {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      margin-left: -5px;
      margin-right: -5px;
      .img {
        padding: 5px;
        .el-image {
          margin-right: 5px;
          display: block;
          height: 120px;
          width: 120px;
        }
      }
    }
  }
  .circle-footer {
    display: flex;
    margin-left: 92px;
    margin-top: 15px;
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    .like {
      margin-left: auto;
    }
    .delete {
      cursor: pointer;
    }
  }
}

.operation-wrapper {
  .operation-placeholder {
    height: 57px;
  }
  .operation-fixed {
    padding: 10px 30px 15px 20px;
    position: fixed;
    bottom: 0;
    left: 231px;
    right: 0;
    z-index: 10;
    background-color: #fff;
    border-top: 1px solid #e4e7ed;
    .operation-left {
      ::v-deep .el-checkbox {
        margin-right: 10px;
      }
    }
  }
}
</style>
